<template>
	<a-card hoverable v-if="followList.total > 0">
		<template #title>
				<a-row justify="space-around" align="center">
					<a-col flex="800">全部关注（{{followList.total}}）</a-col>
					<a-col flex="auto">
						<a-pagination :total="followList.total" :page-size="currentPageSize" simple 
						@change="changePageList"/>
					</a-col>
				</a-row>
		</template>
		<a-space :size="10" direction="vertical" fill>
			<a-typography style="margin-bottom: -5%;">
				<a-typography-paragraph>
					<a-space wrap :size="100" align="start">
						<a-row style="margin-bottom: -25%;" justify="center"
							v-for="(item,index) in followList.data" :key="index">
							<a-col>
								<div style="width: 78px;height: 78px;">
									<a-avatar :size="83" style="background-color: #14C9C9;">
										<img alt="avatar" style="width: 100%;height: 100%;font-size: 10px;"
											:src="item.avatar" />
									</a-avatar>
								</div>
							</a-col>
							<a-col>
								<a-typography
									style="margin-left:37%;width: 163px;margin-top: -32%;">
									<a-typography-title
										style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;"
										ellipsis>
										{{item.nickName}}
									</a-typography-title>
									<a-typography-paragraph
										style="font-size: 12px;color: gray;height: auto;">
										<a-button type="primary" shape="round" @click="changeStatus(item)"
										id="follow">
											<template #icon v-if="item.status == '已关注'">
												<icon-check />
											</template>
											<template #icon v-else-if="item.status == '关注'">
												<icon-plus />
											</template>
											{{item.status}}
										</a-button>
									</a-typography-paragraph>
								</a-typography>
							</a-col>
						</a-row>
					</a-space>
				</a-typography-paragraph>
			</a-typography>
		</a-space>
	</a-card>
	<a-card hoverable v-else-if="followList.total == 0">
		<template #title>
			全部关注（0）
		</template>
		<a-result :status="null">
			<template #icon>
				<IconFaceFrownFill />
			</template>
			<template #title>这里什么也没有哦</template>
			<template #extra>
				<a-button type="primary" @click="()=>{router.push({path: '/index'});}">前往首页</a-button>
			</template>
			<a-typography style="background: var(--color-fill-2); padding: 24px;">
				<a-typography-paragraph>没有关注的用户?</a-typography-paragraph>
				<ul>
					<li> 点击按钮移步到首页 </li>
					<li> 点击你感兴趣的评测 </li>
					<li> 你可以在评测页面关注其他人 </li>
				</ul>
			</a-typography>
		</a-result>
	</a-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		inject,
		watch
	} from 'vue';
	
	import apiUrl from '@/constant/user/apiUrl.js';
	import userApi from '@/module/user/api/index.js';
	import jwt_decode from 'jwt-decode';
	
	let {
		proxy
	} = getCurrentInstance();
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();
	
	const props = defineProps({
		formVisible: Boolean,
		loginForm: Object
	});
	
	const emit = defineEmits();
	
	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;
		
	let followList = reactive({});
	let fansList = reactive({});
	let currentPage = ref(1);
	let currentPageSize = ref(9);
	
	function changeStatus(user){
		console.log('user',user.uid);
		followList.data.map(async(item,index)=>{
			if(user.status == '已关注' && user.uid == item.uid){
				item.status = '关注';
				console.log('item',item.status);
				//取消关注
				let focusStatus = reactive({});
				focusStatus.resp = await userApi.cancelFocusUser(user.uid,jwt_decode(sessionStorage.getItem("token")).uid);
				console.log('focusStatus.resp',focusStatus.resp);
				if(focusStatus.resp.message == '取消关注失败'){
					proxy.$message.error('取消关注失败');
				}
				else if(focusStatus.resp.message == '未知错误'){
					proxy.$message.error('未知错误');
				}
				else if(focusStatus.resp.message == '取消关注成功'){
					proxy.$message.success('取消关注成功');
				}
			}
			else if(user.status == '关注' && user.uid == item.uid){
				item.status = '已关注';
				console.log('item',item.status);
				//关注
				let focusStatus = reactive({});
				focusStatus.resp = await userApi.focusUser(user.uid,jwt_decode(sessionStorage.getItem("token")).uid);
				console.log('focusStatus.resp',focusStatus.resp);
				if(focusStatus.resp.message == '请不要关注自己'){
					proxy.$message.error('请不要关注自己');
				}
				else if(focusStatus.resp.message == '你已经关注该用户了,请不要重复操作'){
					proxy.$message.error('你已经关注该用户了,请不要重复操作');
				}
				else if(focusStatus.resp.message == '关注失败'){
					proxy.$message.error('关注失败');
				}
				else if(focusStatus.resp.message == '未知错误'){
					proxy.$message.error('未知错误');
				}
				else if(focusStatus.resp.message == '关注成功'){
					proxy.$message.success('关注成功');
				}
			}
		});
	}
	
	function changePageList(number){
		console.log('当前页数:',number);
		currentPage.value = number;
		loadingFollowList();
	}
		
	async function loadingFollowList() {
		followList.resp = await userApi.getFollowList(jwt_decode(sessionStorage.getItem("token")).uid,{
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		});
		followList.total = followList.resp.total;
		followList.data = followList.resp.data;
		followList.data.map((item,index)=>{
			item.status = '已关注';
		});
		console.log('followList.resp', followList.resp);
		console.log('followList', followList.data);
		emit('getTab',ref(route.meta.tab));
		return followList;
	}
	
	async function loadingFansList() {
		fansList.resp = await userApi.getFansList(jwt_decode(sessionStorage.getItem("token")).uid);
		fansList.total = fansList.resp.data.length;
		fansList.data = fansList.resp.data;
		console.log('fansList.resp', fansList.resp);
		console.log('fansList', fansList.data);
		emit('getFansData',fansList.data);
		return fansList;
	}
	
	onMounted(()=>{
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingFollowList();
		loadingFansList();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/user/css/follow.less';
</style>
